<template>
    <div class="card-item shadow-sm" v-loading="dataStatus=='loading'">
        <div class="h-full flex-center" v-if="dataStatus=='error'">
            <component-page-loading font-size="1rem" status="error" @reload="getData"></component-page-loading>
        </div>
        <div class="h-full flex flex-col justify-between" v-else>
            <div class="item-title">
                <div>{{ $t('index.chart.wallet.title') }}</div>
            </div>
            <div class="item-chart">
                <component-page-echarts ref="chartBar"></component-page-echarts>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dataStatus: 'dle',
            data: null,
        }
    },
    watch: {
        '$i18n.locale': function (n, o) {
            if (this.data != null) {
                this.initChart(this.data);
            }
        },
    },
    methods: {
        initChart(chart) {
            this.$refs.chartBar.setOption({
                color: ["#91c7ae", "#d48265", '#c23531'],
                tooltip: {
                    trigger: 'axis',
                    confine: true,
                },
                grid: {
                    top: 40,
                    right: 40,
                    bottom: 40,
                    left: 80,
                },
                xAxis: {
                    show: true,
                    data: chart.timed
                },
                yAxis: {
                    show: true,
                    axisLine: {show: false},
                    axisTick: {show: false},
                },
                series: {
                    type: 'line',
                    data: chart.data.diff.map(item => this.$store.getters['config/filterNumeral'](item, '0.[00]'))
                }
            }, true);
        },
        getData() {
            this.dataStatus = 'loading';
            axios.get('/index/chart/wallet').then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dataStatus = 'dle';
                    this.data = response.data.resp_data;
                    // 渲染图表
                    this.initChart(this.data);
                } else {
                    this.dataStatus = 'error';
                }
            });
        },
    },
    mounted() {
        this.getData();
    },
}
</script>

<style lang="scss" scoped>
.card-item {
    background-color: #ffffff;
    border-radius: 7px;
    overflow: hidden;
    height: 320px;
}

.card-item .item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0 20px;
    height: 60px;
}

.card-item .item-number {
    font-size: 2.5rem;
    position: absolute;
    left: 20px;
    top: 40px;
}

.card-item .item-chart {
    height: 260px;
}
</style>
